<template>
  <!-- <el-table
    :data="tableData"
    style="width: 100%;margin-bottom: 20px;"
    row-key="id"
    default-expand-all
    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
  >
    <el-table-column
      align="center"
      prop="title"
      label="名称"
      sortable
      width="150"
    />
    <el-table-column align="center" label="是否可见" sortable width="112">
      <template slot-scope="tableData1">
        <el-checkbox
          v-model="tableData1.row.isBind"
          @change="changecheck(tableData1.row, $event)"
        />
      </template>
    </el-table-column>
    <el-table-column align="center" label="排序" width="84">
      <template slot-scope="tableData2">
        <a-select
          v-model="tableData2.row.orderId"
          show-search
          option-filter-prop="children"
          style="width: 100%"
          @change="value => changeSelect(value, tableData2.row)"
        >
          <template v-for="item in tableLen">
            <a-select-option v-if="selectArr1.includes(item)" :key="item" :value="item" disabled>
              {{ item }}
            </a-select-option>
            <a-select-option v-else :key="item" :value="item">
              {{ item }}
            </a-select-option>
          </template>
        </a-select>
      </template>
    </el-table-column>
  </el-table> -->
  <div>
    <ul
      style="display: flex;
      text-align: center;
      padding: 5px 0;list-style:none;height:42px;line-height:32px;margin:0;background: #f7f8fa;"
    >
      <li style="width: 40%;">名称</li>
      <li style="width: 30%;">是否可见</li>
      <li style="width: 30%;">排序</li>
    </ul>
    <DragTablelist :tabledata="tabledata" />
  </div>
</template>
<script>
// import Sortable from "sortablejs";
// import draggable from 'vuedraggable';
import DragTablelist from './DragTable';

export default {
  components: { DragTablelist },
  props: {
    tabledata: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      tablen: '',
      selectArr: [],
      flagicon: true
    };
  },
  computed: {
    tableData() {
      return this.tabledata.table || [];
    },
    tableLen() {
      return this.tabledata.len;
    },
    headerArr() {
      return this.tabledata.headerArr;
    },
    selectArr1() {
      return this.findorderId(this.tableData, []);
    }
  },
  mounted() {
    // // 阻止默认行为
    // document.body.ondrop = function(event) {
    //   event.preventDefault();
    //   event.stopPropagation();
    // };
    // this.rowDrop();
  },
  methods: {
    findorderId(data, arr = []) {
      if (data && data.length) {
        data.forEach(item => {
          arr.push(item.orderId);
          if (item.children) {
            return this.findorderId(item.children, arr);
          }
        });
      }

      return arr;
    },
    delheader(arr, id) {
      arr.forEach((item, index) => {
        if (item.headerId === id) {
          arr.splice(index, 1);
        }
      });
    },

    changecheck(v, $event) {
      if ($event === true) {
        if (v.orderId === '') {
          v.orderId = 1;
        }
        this.headerArr.push({ headerId: v.id, orderId: v.orderId });
        this.$emit('checklist', this.headerArr);
      } else if ($event === false) {
        this.delheader(this.headerArr, v.id);
        this.$emit('checklist', this.headerArr);
      }
    },
    findid(arr, id, value) {
      arr.forEach(item => {
        if (item.headerId === id) {
          item.orderId = value;
        }
      });
    },
    changeSelect(value, row) {
      this.findid(this.headerArr, row.id, value);
      this.$emit('checklist', this.headerArr);
    },
    // getRowKey() {
    //   return row.id;
    // },
    // 行拖拽
    // rowDrop(e) {
    //   const tbody = document.querySelector(".el-table__body-wrapper tbody");
    //   const _this = this;
    //   Sortable.create(tbody, {
    //     onEnd({ newIndex, oldIndex }) {
    //       const currRow = _this.tableData.splice(oldIndex, 1)[0];
    //       // if (_this.tableData.splice(oldIndex, 1)[0].children) {
    //       //   const currRow = _this.tableData.splice(oldIndex, 1)[0]
    //       // }else{
    //       //   const currRow = _this.tableData.splice(oldIndex, 1)[0]
    //       // }
    //       console.log(e);
    //       console.log(tbody);
    //       console.log(currRow);
    //       _this.tableData.splice(newIndex, 0, currRow);
    //     }
    //   });
    // }
    // ------------
    hiddenchildren() {
      this.flagicon = !this.flagicon;
    },
    changePlace(e) {
      // console.log(e.newIndex + 1, e.oldIndex + 1);
      if (e.newIndex > e.oldIndex) {
        for (let i = 0; i < this.tableData.length; i++) {
          this.tableData[e.newIndex].orderId = e.newIndex + 1;
          if (i !== e.newIndex) {
            this.tableData[i].orderId = i + 1;
          }
          if (this.tableData[i].isBind === true) {
            this.findid(this.headerArr, this.tableData[i].id, i + 1);
          }
        }
      } else {
        for (let j = this.tableData.length - 1; j >= 0; j--) {
          this.tableData[e.newIndex].orderId = e.newIndex + 1;
          if (j !== e.newIndex) {
            this.tableData[j].orderId = j + 1;
          }
          if (this.tableData[j].isBind === true) {
            this.findid(this.headerArr, this.tableData[j].id, j + 1);
          }
        }
      }
      // this.tableData[e.oldIndex].orderId = e.oldIndex + 1;
      // if (this.tableData[e.newIndex].isBind === true) {
      //   this.findid(
      //     this.headerArr,
      //     this.tableData[e.newIndex].id,
      //     e.newIndex + 1
      //   );
      // }
      // if (this.tableData[e.oldIndex].isBind === true) {
      //   this.findid(
      //     this.headerArr,
      //     this.tableData[e.oldIndex].id,
      //     e.oldIndex + 1
      //   );
      // }
      this.$emit('checklist', this.headerArr);
    },
    changePlaceSon(e, arr) {
      if (e.newIndex > e.oldIndex) {
        for (let i = 0; i < arr.length; i++) {
          arr[e.newIndex].orderId = e.newIndex + 1;
          if (i !== e.newIndex) {
            arr[i].orderId = i + 1;
          }
          if (arr[i].isBind === true) {
            this.findid(this.headerArr, arr[i].id, i + 1);
          }
        }
      } else {
        for (let j = arr.length - 1; j >= 0; j--) {
          arr[e.newIndex].orderId = e.newIndex + 1;
          if (j !== e.newIndex) {
            arr[j].orderId = j + 1;
          }
          if (arr[j].isBind === true) {
            this.findid(this.headerArr, arr[j].id, j + 1);
          }
        }
      }
      // if (arr[e.newIndex].isBind === true) {
      //   this.findid(this.headerArr, arr[e.newIndex].id, e.newIndex + 1);
      // }
      // if (arr[e.oldIndex].isBind === true) {
      //   this.findid(this.headerArr, arr[e.oldIndex].id, e.oldIndex + 1);
      // }
      this.$emit('checklist', this.headerArr);
    }
  }
};
</script>
<style lang="scss" scoped>
/deep/.el-table td,
/deep/.el-table th.is-leaf {
  border-bottom: none !important;
}
/deep/.caret-wrapper {
  display: none;
}
/deep/.el-table__row {
  height: 56px;
}

//----------------------------------
.leverFirst,
.leverSecond {
  display: flex;
  text-align: center;
  padding: 5px 0;
}
.leverSecond {
  display: flex;
  padding: 5px 0;
}
.leverFirst_name {
  width: 40%;
  display: flex;
  align-items: center;
  padding-left: 20px;
}
.leverSecond_name {
  width: 40%;
  display: flex;
  align-items: center;
  text-align: left;
  padding-left: 40px;
}
.leverFirst_check {
  width: 30%;
  line-height: 42px;
}
.displayson {
  display: none;
}
/deep/.el-input{
width: 30%;
}
.leverFirst {
  border-bottom: 1px solid #dcdcdd;
  &:hover {
    background-color: #f4f4f4;
  }
}
.leverSecond {
  border-bottom: 1px solid #f0f0f0;
  &:hover {
    background-color: #f4f4f4;
  }
}
</style>
